<template>
  <view class="content-detail">
    <view class="rich-content">
      <rich-text :nodes="processedContent"></rich-text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const content = ref('')

// 处理富文本中的图片宽度
const processedContent = computed(() => {
  if (!content.value) return '';
  return content.value
    // 处理自闭合的img标签
    .replace(/<img([^>]*)>/gi, '<br><img$1 style="max-width:100%;height:auto;display:block;margin:20rpx 0;"><br>')
    // 处理非自闭合的img标签
    .replace(/<img([^>]*)>/gi, '<br><img$1 style="max-width:100%;height:auto;display:block;margin:20rpx 0"></img><br>')
    // 处理p标签
    .replace(/<p/gi, '<p style="margin: 0; padding: 0;"');
})

onLoad((options) => {
  if(options.content) {
    content.value = decodeURIComponent(options.content)
  }
})
</script>

<style scoped>
.content-detail {
  padding: 24rpx;
  background-color: #fff;
  min-height: 100vh;
}

.rich-content {
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
}
</style> 